<template>
    <a-config-provider :locale="zhCN">
        <div id="web-layout">

            <!-- 头部 -->
            <Header />

            <!-- 插槽用于插入页面特定内容 -->
            <main class="main">
                <router-view />
            </main>

            <!-- 底部 -->
            <Footer />

        </div>
    </a-config-provider>
</template>

<script setup>
import { provide, ref } from 'vue';
import Header from '@/components/web/header.vue';  //公共布局
import Footer from '@/components/web/footer.vue';  //公共布局
import { useRoute, useRouter } from 'vue-router';

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('cn');

const route = useRoute();
const router = useRouter();
if (route.path === '/') { //域名后面没有url参数时直接跳转到首页
    router.replace('/index');
}

// 不用uue3的状态管理store是因为，如果store不结合localStorage使用，会导致刷新页面后丢失登录状态，既然都用了localStorage，那就直接用localStorage，没必要再用store了
const webToken = ref(localStorage.getItem("vue3-vite5-web-token") || ""); // 登录token
const webLoginMobile = ref(localStorage.getItem('vue3-vite5-web-user-mobile') || "");  // 登录mobile
const webLoginEmail = ref(localStorage.getItem('vue3-vite5-web-user-email') || "");  // 登录邮箱
const webLoginAvatar = ref(localStorage.getItem('vue3-vite5-web-user-avatar') || ""); // 登录avatar
const webLoginNickname = ref(localStorage.getItem('vue3-vite5-web-user-nickname') || ""); // 登录昵称
const webIsLogin = () => {
    return webToken.value !== "";
}
// 依赖注入--是否已登录（true、false）
provide('webIsLogin', {
    webIsLogin
});

// 未登录则跳转到登录页面
const webCheckTokenLogin = () => {
    if (!webIsLogin()) {
        router.push('/login');
    }
}
// 依赖注入--未登录则跳转到登录页面
provide('webCheckTokenLogin', {
    webCheckTokenLogin
});

// 依赖注入--退出登录
const webLogout = () => {
    //删除所有缓存数据
    localStorage.clear();
    webToken.value = "";
    webLoginMobile.value = "";
    webLoginEmail.value = "";
    webLoginAvatar.value = "";
    webLoginNickname.value = "";
    router.push({ name: 'web_index' });
}
// 依赖注入--退出登录--提供给其他组件使用
provide('webLogout', {
    webLogout
});

// 依赖注入--获取当前用户信息--提供给其他组件使用
provide('webLoginInfo', {
    webLoginNickname,
    webLoginEmail,
    webLoginAvatar,
    webLoginMobile,
});

// 依赖注入--获取当前用户详细信息
const webLoginDetail = ref([]);  // 登录用户详细信息
// 依赖注入--获取当前用户信息--提供给其他组件使用
provide('webLoginDetail', {
    webLoginDetail
});

// 依赖注入--文件、图片前的域名
const imgDomainUrl = ref(import.meta.env.VITE_IMG_DOMAIN_URL);
// 依赖注入--文件、图片前的域名--提供给其他组件使用
provide('imgDomainUrl', {
  imgDomainUrl
});

// 依赖注入--上传（上传地址、额外请求头部信息等）
const uploadAddHeaders = ref({ 'web-token': webToken.value });
const uploadUrl = ref('/'+import.meta.env.VITE_API_PROXY_KEY+'/web/upload/img?upPath=');
// 依赖注入--文件、图片前的域名--提供给其他组件使用
provide('uploadInfo', {
  uploadUrl,
  uploadAddHeaders
});

// 跳转到其他页面（根据命名路由跳转）
const doRedirectByName = (name,params={}) => {
    router.push({ name: name, params: params });
}
// 依赖注入--跳转到其他页面（根据命名路由跳转）
provide('doRedirectByName', {
    doRedirectByName
});
</script>

<style scoped>
#web-layout {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.main {
    margin: 0 auto;
    /* background-color: #f2f2f2; */
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .main {
        /* margin-top: 56rem; */
        padding-bottom: 80rem;
    }
}
</style>